<template>
  <div id="main" v-loading="loading">
    <div slot="header" class="clearfix">
      <!-- <h2 class="aline-l">企业认证</h2> -->
      <div class="dialogItem">
        <span>企业认证</span>
      </div>
    </div>
    <!-- <div class="text item">
      <el-row>
        <el-col class="aline-l">
          <div
            :class="[
              'item-name',
              'margin-b20',
              isApprove
                ? authRecord.status == 2
                  ? 'text-gray'
                  : 'text-poper'
                : 'text-gray',
            ]"
          >
            <i class="el-icon-warning"></i>
            {{
              isApprove
                ? authRecord.status == 0
                  ? "企业认证审核中..."
                  : authRecord.status == 1
                  ? "企业认证成功"
                  : "企业认证失败"
                : "未企业认证"
            }}
          </div>
          <span class="item-ts">
            认证申请提交后，工作人员将在1~3个工作日内处理反馈，
            申请通过后，系统将自动启用您账户的相关功能。 
          </span>
        </el-col>
      </el-row>
    </div> -->
    <div class="box-card margin-t10">
      <div>
        <el-divider></el-divider>
        <el-form
          class="padding-r35"
          label-width="100px"
          label-position="left"
          :model="approve"
          ref="approve"
          :rules="regFormRules"
          v-if="authRecord"
        >
          <el-form-item label="姓名:" class="wid-4" prop="name">
            <el-input v-model="approve.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" class="wid-4" prop="phone">
            <el-input v-model="approve.phone"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码:" class="wid-4" prop="idCard">
            <el-input v-model="approve.idCard"></el-input>
          </el-form-item>
          <el-form-item label="公司代码:" class="wid-4" prop="companyCode">
            <el-input v-model="approve.companyCode"></el-input>
          </el-form-item>
          <el-form-item label="公司名称:" class="wid-4" prop="companyName">
            <el-input v-model="approve.companyName"></el-input>
          </el-form-item>
          <el-form-item label="邮箱:" class="wid-4" prop="email">
            <el-input v-model="approve.email"></el-input>
          </el-form-item>
          <el-form-item label="备注:" class="wid-5" prop="remark">
            <el-input
              type="textarea"
              :rows="5"
              v-model.trim="approve.remark"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="身份证正面:"
            class="wid-4 margin-b35 aline-c"
            prop="cardFile1Url"
          >
            <el-upload
              action="#"
              ref="upload"
              drag
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange1"
              v-if="authRecord.status == 2"
            >
              <img
                v-if="approve.cardFile1Url"
                :src="approve.cardFile1Url"
                class="avatar"
              />
              <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
              <img
                src="~@/assets/img/idCardZ.png"
                alt=""
                v-if="!approve.cardFile1Url"
              />
            </el-upload>
            <el-image
              v-if="approve.cardFile1"
              :src="baseURL + `/profile` + approve.cardFile1.fileStoragePath"
              :preview-src-list="[
                baseURL + `/profile` + approve.cardFile1.fileStoragePath,
              ]"
            ></el-image>
            <div class="margin-t35" v-if="approve.cardFile1">
              {{ approve.cardFile1.fileName }}
            </div>
          </el-form-item>
          <el-form-item
            label="身份证反面:"
            class="wid-4 margin-b35 aline-c"
            prop="cardFile2Url"
          >
            <el-upload
              action="#"
              ref="upload"
              drag
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange2"
              v-if="authRecord.status == 2"
            >
              <img
                v-if="approve.cardFile2Url"
                :src="approve.cardFile2Url"
                class="avatar"
              />
              <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
              <img
                src="~@/assets/img/idCardF.png"
                alt=""
                srcset=""
                v-if="!approve.cardFile2Url"
              />
            </el-upload>
            <el-image
              v-if="approve.cardFile2.length != 0"
              :src="baseURL + `/profile` + approve.cardFile2.fileStoragePath"
              :preview-src-list="[
                baseURL + `/profile` + approve.cardFile2.fileStoragePath,
              ]"
            ></el-image>
            <div class="margin-t35" v-if="approve.cardFile2.length != 0">
              {{ approve.cardFile2.fileName }}
            </div>
          </el-form-item>
          <el-form-item
            label="手持身份证:"
            class="wid-4 margin-b35 margin-t35 aline-c"
            prop="cardFile3Url"
          >
            <el-upload
              action="#"
              ref="upload"
              drag
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange4"
              v-if="authRecord.status == 2"
            >
              <img
                v-if="approve.cardFile3Url"
                :src="approve.cardFile3Url"
                class="avatar"
              />
              <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->

              <img
                src="~@/assets/img/scidCard.png"
                alt=""
                v-if="!approve.cardFile3Url"
              />
            </el-upload>

            <el-image
              v-if="approve.cardFile3.length != 0"
              :src="baseURL + `/profile` + approve.cardFile3.fileStoragePath"
              :preview-src-list="[
                baseURL + `/profile` + approve.cardFile3.fileStoragePath,
              ]"
            ></el-image>
            <div class="margin-t35" v-if="approve.cardFile3.length != 0">
              {{ approve.cardFile3.fileName }}
            </div>
          </el-form-item>
          <el-form-item
            label="营业执照:"
            class="wid-4 margin-b35 margin-t35 aline-c"
            prop="licenseFileUrl"
          >
            <el-upload
              action="#"
              ref="upload"
              drag
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange3"
              v-if="authRecord.status == 2"
            >
              <img
                v-if="approve.licenseFileUrl"
                :src="approve.licenseFileUrl"
                class="avatar"
              />

              <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->

              <img
                src="~@/assets/img/yyzz.png"
                alt=""
                v-if="!approve.licenseFileUrl"
              />
            </el-upload>

            <el-image
              v-if="approve.licenseFile.length != 0"
              :src="baseURL + `/profile` + approve.licenseFile.fileStoragePath"
              :preview-src-list="[
                baseURL + `/profile` + approve.licenseFile.fileStoragePath,
              ]"
            ></el-image>
            <div class="margin-t35" v-if="approve.licenseFile.length != 0">
              {{ approve.licenseFile.fileName }}
            </div>
          </el-form-item>

          <el-form-item class="wid-8 aline-c">
            <el-button
              type="primary"
              @click="refer"
              v-if="!isApprove || authRecord.status == 2"
              :disabled="disabled"
            >
              提交资料
            </el-button>
          </el-form-item>
        </el-form>
        <el-form
          class="padding-r35"
          label-width="100px"
          label-position="left"
          :model="approve"
          ref="approve"
          :rules="regFormRules"
          v-else
        >
          <el-form-item label="姓名:" class="wid-4" prop="name">
            <el-input v-model="approve.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" class="wid-4" prop="phone">
            <el-input v-model="approve.phone"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码:" class="wid-4" prop="idCard">
            <el-input v-model="approve.idCard"></el-input>
          </el-form-item>
          <el-form-item label="公司代码:" class="wid-4" prop="companyCode">
            <el-input v-model="approve.companyCode"></el-input>
          </el-form-item>
          <el-form-item label="公司名称:" class="wid-4" prop="companyName">
            <el-input v-model="approve.companyName"></el-input>
          </el-form-item>
          <el-form-item label="邮箱:" class="wid-4" prop="email">
            <el-input v-model="approve.email"></el-input>
          </el-form-item>
          <el-form-item label="备注:" class="wid-5" prop="remark">
            <el-input
              type="textarea"
              :rows="5"
              v-model.trim="approve.remark"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="身份证正面:"
            class="wid-4 margin-b35 aline-c"
            prop="cardFile1Url"
          >
            <el-upload
              action="#"
              ref="upload"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange1"
            >
              <img
                v-if="approve.cardFile1Url"
                :src="approve.cardFile1Url"
                class="avatar"
              />
              <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->

              <img
                src="~@/assets/img/idCardZ.png"
                alt=""
                v-if="!approve.cardFile1Url"
              />
            </el-upload>
          </el-form-item>
          <el-form-item
            label="身份证反面:"
            class="wid-4 margin-b35 aline-c"
            prop="cardFile2Url"
          >
            <el-upload
              action="#"
              ref="upload"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange2"
            >
              <img
                v-if="approve.cardFile2Url"
                :src="approve.cardFile2Url"
                class="avatar"
              />
              <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->

              <img
                src="~@/assets/img/idCardF.png"
                alt=""
                srcset=""
                v-if="!approve.cardFile2Url"
              />
            </el-upload>
          </el-form-item>
          <el-form-item
            label="手持身份证:"
            class="wid-4 margin-b35 margin-t35 aline-c"
            prop="cardFile3Url"
          >
            <el-upload
              action="#"
              ref="upload"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange4"
            >
              <img
                v-if="approve.cardFile3Url"
                :src="approve.cardFile3Url"
                class="avatar"
              />
              <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->

              <img
                src="~@/assets/img/scidCard.png"
                alt=""
                v-if="!approve.cardFile3Url"
              />
            </el-upload>
          </el-form-item>
          <el-form-item
            label="营业执照:"
            class="wid-4 margin-b35 margin-t35 aline-c"
            prop="licenseFileUrl"
          >
            <el-upload
              action="#"
              ref="upload"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange3"
            >
              <img
                v-if="approve.licenseFileUrl"
                :src="approve.licenseFileUrl"
                class="avatar"
              />
              <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->

              <img
                src="~@/assets/img/yyzz.png"
                alt=""
                v-if="!approve.licenseFileUrl"
              />
            </el-upload>
          </el-form-item>
          <el-form-item class="wid-8 aline-c">
            <el-button type="primary" @click="refer"> 提交资料 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  phoneReg,
  emailReg,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  req,
  service,
  encrypt,
  decrypt,
  reqtoken,
  reqField,
} from "../../api/axiosFun";
var validbankName = (rule, value, callback) => {
  var myreg = /^[\u4e00-\u9fa5]{4,20}$/;
  if (!myreg.test(value)) {
    return callback(new Error("请输入正确的开户行名称，如XX银行XX支行"));
  }
  if (!value.includes("银行")) {
    return callback(new Error("请输入正确的开户行名称，如XX银行XX支行"));
  }
  if (!value.includes("支行")) {
    return callback(new Error("请输入正确的开户行名称，如XX银行XX支行"));
  }
  return callback();
};
export default {
  data() {
    return {
      userInfo: null,
      baseURL: baseURL,
      loading: false,
      disabled: false,
      isApprove: false,
      authRecord: null,
      approve: {
        cardFile1: [],
        cardFile2: [],
        cardFile3: [],
        licenseFile: [],
        cardFile1Url: null,
        cardFile2Url: null,
        cardFile3Url: null,
        licenseFileUrl: null,
        name: "",
        phone: "",
        idCard: "",
        companyCode: "",
        companyName: "",
        email: "",
        remark: "",
      },
      formImg: {
        cardFile1: "",
        cardFile2: "",
        cardFile3: "",
        licenseFile: "",
      },
      regFormRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["blur", "change"],
          },
          {
            // pattern: /^(1[3-9])[0-9]{9}$/,
            pattern: phoneReg,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        idCard: [
          {
            required: true,
            message: "请输入身份证号码",
            trigger: ["blur", "change"],
          },
          {
            pattern:
              /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "请输入正确的身份证号码",
            trigger: "blur",
          },
        ],
        companyName: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        companyCode: [
          {
            required: true,
            message: "请输入公司代码",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^[0-9A-HJ-NPQRTUWXY]{2}[0-9]{6}[0-9A-Z]{10}$/,
            message: "请输入正确的公司代码",
            trigger: "blur",
          },
        ],
        email: [
          {
            pattern: emailReg,
            required: true,
            message: "请输入正确的邮箱",
            trigger: "blur",
          },
        ],
        cardFile1Url: [{ required: true, message: "请上传身份证" }],
        cardFile2Url: [{ required: true, message: "请上传身份证" }],
        cardFile3Url: [{ required: true, message: "请上传手持身份证照片" }],
        licenseFileUrl: [{ required: true, message: "请上传营业执照" }],
      },
    };
  },
  created() {
    if (this.$store.state.user) {
      this.userInfo = JSON.parse(this.$store.state.user);
    } else {
      this.getInfo();
    }
    if (this.$store.state.cInfo) {
      this.isApprove = true;
      this.kInfo(JSON.parse(this.$store.state.cInfo));
    } else {
      this.companyInfo();
    }
  },
  computed: {
    ...mapGetters(["getUser"]),
    ...mapGetters(["getcInfo"]),
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal);
    },
    getcInfo(newVal) {
      this.kInfo(JSON.parse(newVal));
    },
  },
  methods: {
    getInfo() {
      service
        .get("/api/photon/getUserInfo", {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.userInfo = res.data;
            this.$store.commit("user", JSON.stringify(res.data));
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    companyInfo() {
      service
        .get("/api/photon/getAuthRecordKyc", {})
        .then((res) => {
          if (res.code == 0) {
            this.isApprove = true;
            this.kInfo(res.data);
            this.$store.commit("cInfo", JSON.stringify(res.data));
          } else {
            this.isApprove = false;
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    kInfo(data) {
      this.authRecord = data;
      this.approve = {
        cardFile1: data.cardFile1,
        cardFile2: data.cardFile2,
        cardFile3: data.cardFile3 == null ? [] : data.cardFile3,
        licenseFile: data.licenseFile,
        cardFile1Url: null,
        cardFile2Url: null,
        cardFile3Url: null,
        licenseFileUrl: null,
        name: data.name,
        phone: data.phone,
        idCard: data.idCard,
        companyCode: data.companyCode,
        companyName: data.companyName,
        email: data.email,
        remark: data.remark,
      };
    },
    handleChange1(files, fileList) {
      const isJPG = files.raw.type == "image/jpeg" || "image/png";
      if (!isJPG) {
        this.$message.error("上传图片格式不符合！");
        return;
      }

      if (files.size > 1024 * 1024 * 3) {
        this.$message.error("上传图片不能超过3M！");
        return;
      }
      this.approve.cardFile1Url = URL.createObjectURL(files.raw);
      this.formImg.cardFile1 = files.raw;
    },
    handleChange2(files, fileList) {
      const isJPG = files.raw.type == "image/jpeg" || "image/png";
      if (!isJPG) {
        this.$message.error("上传图片格式不符合！");
        return;
      }
      if (files.size > 1024 * 1024 * 3) {
        this.$message.error("上传图片不能超过3M！");
        return;
      }

      this.approve.cardFile2Url = URL.createObjectURL(files.raw);
      this.formImg.cardFile2 = files.raw;
    },
    handleChange3(files, fileList) {
      const isJPG = files.raw.type == "image/jpeg" || "image/png";
      if (!isJPG) {
        this.$message.error("上传图片格式不符合！");
        return;
      }
      if (files.size > 1024 * 1024 * 3) {
        this.$message.error("上传图片不能超过3M！");
        return;
      }
      this.approve.licenseFileUrl = URL.createObjectURL(files.raw);
      this.formImg.licenseFile = files.raw;
    },
    handleChange4(files, fileList) {
      const isJPG = files.raw.type == "image/jpeg" || "image/png";
      if (!isJPG) {
        this.$message.error("上传图片格式不符合！");
        return;
      }
      if (files.size > 1024 * 1024 * 3) {
        this.$message.error("上传图片不能超过3M！");
        return;
      }
      this.approve.cardFile3Url = URL.createObjectURL(files.raw);
      this.formImg.cardFile3 = files.raw;
    },
    refer() {
      const fd = new FormData();
      this.disabled = true;
      fd.append("cardFile1", this.formImg.cardFile1);
      fd.append("cardFile2", this.formImg.cardFile2);
      fd.append("cardFile3", this.formImg.cardFile3);
      fd.append("licenseFile", this.formImg.licenseFile);
      this.$refs.approve.validate((valid) => {
        if (!valid) return;
        let url =
          "?companyCode=" +
          this.approve.companyCode +
          "&companyName=" +
          this.approve.companyName +
          "&idCard=" +
          this.approve.idCard +
          "&name=" +
          this.approve.name +
          "&phone=" +
          this.approve.phone +
          "&remark=" +
          this.approve.remark +
          "&email=" +
          this.approve.email +
          "&type=2";
        reqField("POST", "/api/photon/saveAuthRecordKyc" + url, fd)
          .then((res) => {
            this.disabled = false;
            if (res.code == 0) {
              this.$message.success("提交成功，请等待审核...");
              this.disabled = true;
              this.isApprove = true;
              this.companyInfo();
            } else {
              this.isApprove = false;
              this.$message.error(spStr(res.msg, "PhotonPay", ""));
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      });
    },
  },
};
</script>

<style scoped>
#main .box-card .el-form-item {
  display: inline-block;
  margin-left: 5%;
}
h2 {
  margin: 0;
}
.item .item-name {
  font-size: 35px;
  line-height: 80px;
}
.box-card .item .item-ts {
  font-size: 12px;
  font-weight: 500;
  color: #949494;
}
.el-upload .avatar {
  /* margin-left: -15px;
  margin-top: -15px; */
  /* width: 180px;
  height: 180px; */
  width: 100%;
  height: 100%;
  display: block;
}
.el-upload img {
  width: 360px;
  height: 215px;
}
.el-image {
  margin-top: 20px;
  /* width: 180px;
  height: 180px; */
  width: 360px;
  height: 215px;
}
</style>
